<style>
  .team-drawer-footer{
    clear: right;
    width: 100%;
    position: relative;
    bottom: -220px;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
<template>
  <div>
    <Drawer
      v-model="modalState"
      :mask-closable="false"
      :closable="false"
      :title="title"
      width="87%">
      <div>
        <div style="font-size: 15px; margin-top: 10px; margin-bottom: 30px;">分组标签名称：{{row.tagname}}</div>
        <Table
          class="table"
          :columns="columns"
          :data="historyData"
          border>
        </Table>
        <table-page
          class="paging"
          :dataCount="dataCount"
          @change-page="changePage"
          @change-page-size="changePageSize"
          :pageSize="pageSize">
        </table-page>
      </div>
      <div class="team-drawer-footer">
        <Button @click="cancel">返回</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
import TablePage from '_c/table-page'
export default {
  name: 'TeamDetailDrawer',
  components: {
    TablePage
  },
  data () {
    return {
      page: 1,
      title: '',
      loading: true,
      columns: [
        {
          title: '序号',
          type: 'index2',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + (this.page - 1) * this.pageSize + 1)
          }
        },
        {
          title: '加入日期',
          key: 'ctime',
          // width: 150,
          align: 'center'
        },
        {
          title: '签约销售',
          key: 'mname',
          // width: 150,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'uname',
          // width: 150,
          align: 'center'
        },
        {
          title: '电话',
          key: 'tel',
          // width: 150,
          align: 'center'
        },
        {
          title: '跟踪状态',
          key: 'state0',
          // width: 150,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.state0 === 1 ? '流失' : params.row.state0 === 0 ? '有效' : '-')
          }
        },
        {
          title: '客户状态',
          key: 'state',
          // width: 150,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.state === 0 ? '未预约' : params.row.state === 1 ? '已预约' : params.row.state === 2 ? '未到访' : params.row.state === 3 ? '已到店' : params.row.state === 4 ? '已签约' : params.row.state === 5 ? '已退款' : '-')
          }
        },
        {
          title: '签约金额',
          key: 'cprice',
          // width: 150,
          align: 'center'
        }
      ]
    }
  },
  updated () {
    this.title = '分组发送详情页'
  },
  computed: {
    ...mapState({
      row: state => state.teamSend.row,
      modalState: state => state.modal.teamDrawerState,
      groupDetailList: state => state.groupDetail.groupDetailList,
      dataCount: state => state.groupDetail.groupDetailDataCount,
      historyData: state => state.groupDetail.groupDetailHistoryData,
      pageSize: state => state.groupDetail.groupDetailPageSize
    })
  },
  methods: {
    ...mapActions([
      'updateTeamDrawerState',
      'changeGroupDetailPage',
      'changeGroupDetailPageSize'
    ]),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    cancel () {
      this.updateTeamDrawerState(false)
    },
    changePage (index) {
      this.page = index
      this.changeGroupDetailPage(index)
    },
    changePageSize (value) {
      this.changeGroupDetailPageSize(value)
      this.changePage(this.page)
    }
  }
}
</script>
